import React from 'react';
import {injectIntl} from './intl';
import PropTypes from 'prop-types';
import {Button, Popconfirm, Collapse, Row, Col, Icon, Table, Modal, Divider} from 'antd';
import {TABLE, FIXED_COLUMN_WIDTH} from '../constants';
import WrappedPopconfirm from '../common/WrappedPopconfirm';
import TextInput from 'Shared/components/TextInput';
import styles from './style.css';
import PWCSelectPanel from './PWCSelectPanel';
import ProductCategoryPanel from './ProductCategoryPanel';
const EMPTY_ARRAY = [];
const Panel = Collapse.Panel;
export class AddCategory extends React.PureComponent {
    state = {
        loading: false,
        hasOperat: false,
        showCategory: false,
        showPWC: false,
    };

    showCategory = () => {
        this.setState({
            showCategory: !this.state.showCategory
        });
    };

    showPWC = () => {
        this.setState({
            showPWC: !this.state.showPWC
        });
    };

    onClickAddCategory = e => {
        e.stopPropagation();
        this.setState({
            showCategory: true
        });
    }

    onClickDelete = e => {
        e.stopPropagation();
        this.props.onClickDelete(e.currentTarget.dataset.id);
    }

    onClickDeletePWC = e => {
        e.stopPropagation();
        const partId = e.currentTarget.dataset.id;
        this.props.onClickDeletePWC(partId);
    }

    onClickDeleteAll = e => {
        e.stopPropagation();
        this.props.onClickDeleteAll();
    }

    onClickHtmlA = e => {
        e.stopPropagation();
    }

    onBlurRemark = (value, id) => {
        this.props.updatePWCDetail({
            remark: value,
            id
        });
    };

    onChangeVehicleProperty = (value, id) => {
        this.props.updateCategoryDetail({
            productCategoryId: id,
        });
    };
    onSelectPWCs = data => {
        if(data.length)
            this.props.onSelectPWCs(data);
        this.setState({
            showPWC: false
        });
    }

    onSelectCategorys = data => {
        if(data.length)
            this.props.onSelectCategorys(data, this.state.detailId);
        this.setState({
            showCategory: false
        });
    }
    render() {
        const {vehicleCategoryItems = EMPTY_ARRAY} = this.props.data;
        const {partWarrantyCategories = []} = vehicleCategoryItems.find(item => item.id === this.props.itemId) || {};
        const currentSelectPWCRowKeys = partWarrantyCategories.map(item => item.id);

        const materialColumns = [
            {
                title: this.props.intl.formatMessage({
                    id: 'addCategory.colums.code',
                    defaultMessage: '备件索赔分类编号'
                }),
                dataIndex: 'code',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'addCategory.colums.name',
                    defaultMessage: '备件索赔分类名称'
                }),
                dataIndex: 'name',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'addCategory.column.remark',
                    defaultMessage: '备注'
                }),
                dataIndex: 'remark',
                render: (text, record) => <TextInput id={record.id}
                    value={record.remark} onBlur={this.onBlurRemark} />
            },
            {
                title: partWarrantyCategories.length ? (
                    <WrappedPopconfirm
                        id="delete"
                        title={this.props.intl.formatMessage({
                            id: 'addCategory.popconfirm.message',
                            defaultMessage: '是否继续?'
                        })}
                        okText={this.props.intl.formatMessage({
                            id: 'addCategory.popconfirm.confirm',
                            defaultMessage: '确认'
                        })}
                        cancelText={this.props.intl.formatMessage({
                            id: 'addCategory.popconfirm.cancel',
                            defaultMessage: '取消'
                        })}
                        onConfirm={this.props.onDeleteAllPWC}>
                        <a>
                            {this.props.intl.formatMessage({
                                id: 'addCategory.deleteAll',
                                defaultMessage: '清空'
                            })}
                        </a>
                    </WrappedPopconfirm>
                ) : (
                    <a>
                        {this.props.intl.formatMessage({
                            id: 'addCategory.deleteAll',
                            defaultMessage: '清空'
                        })}
                    </a>
                ),
                dataIndex: 'action',
                fixed: 'right',
                width: FIXED_COLUMN_WIDTH,
                render: (text, record) => (
                    <a onClick={this.onClickDeletePWC} data-id={record.id}>
                        {this.props.intl.formatMessage({
                            id: 'addCategory.delete',
                            defaultMessage: '删除'
                        })}
                    </a>
                )
            }
        ];
        const vehiclePanel = vehicleCategoryItems.map(p => {
            const header = (
                <Row>
                    <Col span={22} className={styles.edit}>
                        <strong>{`${p.productCategoryCode}/${p.productCategoryName}`}</strong>
                        <Divider type="vertical" />
                    </Col>
                    <Col span={2} className={`col-align-right ${styles.collapseBtn}`}>
                        {<a data-id={p.id} onClick={this.onClickDelete}>{this.props.intl.formatMessage({
                            id: 'addCategory.vehicleCategoryItems.deleteBtn',
                            defaultMessage: '删除'
                        })}</a>}
                    </Col>
                </Row>
            );
            const dataSource = p.partWarrantyCategories || EMPTY_ARRAY;
            const isCurrentPanel = this.props.itemId === p.id;
            return (
                <Panel key={p.id} header={header}>
                    <Divider />
                    {isCurrentPanel ? [<Button className={styles.add} key="addBtn" type="dashed" data-id={p.id} onClick={this.showPWC}>
                        <Icon type="plus" />{this.props.intl.formatMessage({
                            id: 'addCategory.vehicleCategoryItems.addBtn',
                            defaultMessage: '新增索赔分类'
                        })}
                    </Button>,
                    <Table key="table"
                        className="white-space-nowrap"
                        rowKey="id"
                        columns={materialColumns}
                        pagination={false}
                        dataSource={dataSource}
                        {...TABLE} />] : ''}
                </Panel>
            );
        });
        const clearAllBtn = vehicleCategoryItems.length ? (<Popconfirm
            placement="topLeft"
            key="deleteAll"
            onConfirm={this.onClickDeleteAll}
            onCancel={this.onClickHtmlA}
            title={this.props.intl.formatMessage({
                id: 'addCategory.popconfirm.delete.message',
                defaultMessage: '是否确认清空?'
            })}
            okText={this.props.intl.formatMessage({
                id: 'addCategory.popconfirm.confirm',
                defaultMessage: '确认'
            })}
            cancelText={this.props.intl.formatMessage({
                id: 'addCategory.popconfirm.cancel',
                defaultMessage: '取消'
            })}>
            <a onClick={this.onClickHtmlA}>{this.props.intl.formatMessage({
                id: 'addCategory.deleteAll',
                defaultMessage: '清空'
            })}</a>
        </Popconfirm>)
            : (<a key="deleteAll" onClick={this.onClickDeleteAll} >{this.props.intl.formatMessage({
                id: 'addCategory.deleteAll',
                defaultMessage: '清空'
            })}</a>);
        return (
            <React.Fragment>
                <Modal
                    title={this.props.intl.formatMessage({
                        id: 'addCategory.vehicleCategoryItems.modal.title',
                        defaultMessage: '车型查询'
                    })}
                    width="80%"
                    maskClosable={false}
                    footer={null}
                    wrapClassName={styles.dataSelectModal}
                    destroyOnClose={true}
                    visible={this.state.showCategory}
                    onCancel={this.showCategory}>
                    <ProductCategoryPanel onSelect={this.onSelectCategorys} />
                </Modal>
                <Modal
                    title={this.props.intl.formatMessage({
                        id: 'addCategory.partWarrantyCategories.modal.title',
                        defaultMessage: '备件索赔分类查询'
                    })}
                    width="60%"
                    maskClosable={false}
                    footer={null}
                    wrapClassName={styles.dataSelectModal}
                    destroyOnClose={true}
                    visible={this.state.showPWC}
                    onCancel={this.showPWC}>
                    <PWCSelectPanel onSelect={this.onSelectPWCs} currentSelectRowKeys={currentSelectPWCRowKeys} dealerId={this.props.dealerId} />
                </Modal>
                <Collapse activeKey={this.props.detailCollapse} onChange={this.props.onChangeDetailCollapse}>
                    <Panel header={<Row>
                        <Col span={20} className={styles.edit}>
                            {this.props.intl.formatMessage({
                                id: 'addCategory.vehicleCategoryItems.title',
                                defaultMessage: '车型清单'
                            })}
                        </Col>
                        <Col span={4} className={`col-align-right ${styles.collapseBtn}`}>
                            {[
                                <a size="small"
                                    onClick={this.onClickAddCategory}
                                    key="add">{this.props.intl.formatMessage({
                                        id: 'addCategory.vehicleCategoryItems.addDetail',
                                        defaultMessage: '新增'
                                    })}</a>,
                                clearAllBtn]}
                        </Col>
                    </Row>} key="1">
                        <Collapse accordion activeKey={this.props.itemId} onChange={this.props.onChangeCollapse}>
                            {vehiclePanel}
                        </Collapse>
                    </Panel>
                </Collapse>
            </React.Fragment>
        );
    }
}

AddCategory.propTypes = {
    data: PropTypes.object.isRequired,
    updateCategoryDetail: PropTypes.func.isRequired,
    updatePWCDetail: PropTypes.func.isRequired,
    onChangeCollapse: PropTypes.func.isRequired,
    onChangeDetailCollapse: PropTypes.func.isRequired,
    onClickDelete: PropTypes.func.isRequired,
    onClickDeleteAll: PropTypes.func.isRequired,
    onClickDeletePWC: PropTypes.func.isRequired,
    onDeleteAllPWC: PropTypes.func.isRequired,
    onSelectCategorys: PropTypes.func.isRequired,
    onSelectPWCs: PropTypes.func.isRequired,
    dealerId: PropTypes.string,
    detailCollapse: PropTypes.array,
    intl: PropTypes.object,
    itemId: PropTypes.string,
};

import {connect} from 'react-redux';
import {
    deleteCategoryDetail,
    deleteAllCategoryDetail,
    deletePWCDetail,
    deleteAllPWCDetail,
    updatePWCDetail,
    updateCategoryDetail,
    onSelectPWCs,
    selectCategoryToDetails,
} from './actions';
const mapDispatchToProps = (dispatch, ownProps) => {
    const detailId = ownProps.data.id || '';
    const productCategoryId = ownProps.itemId;
    return {
        onClickDelete: id => dispatch(deleteCategoryDetail(id, detailId)),
        onClickDeletePWC: pid => dispatch(deletePWCDetail(pid, productCategoryId, detailId)),
        onClickDeleteAll: () => dispatch(deleteAllCategoryDetail(detailId)),
        onDeleteAllPWC: () => dispatch(deleteAllPWCDetail(productCategoryId, detailId)),
        updatePWCDetail: obj => dispatch(updatePWCDetail({
            ...obj,
            detailId,
            productCategoryId
        })),
        updateCategoryDetail: obj => dispatch(updateCategoryDetail({
            ...obj,
            detailId
        })),
        onSelectPWCs: data => dispatch(onSelectPWCs(data, productCategoryId, detailId)),
        onSelectCategorys: data => dispatch(selectCategoryToDetails(data, detailId))
    };
};

export default connect(
    null,
    mapDispatchToProps
)(injectIntl(AddCategory));

